﻿<div class="layui-card" id="lg-AcceptList">
    <div class="layui-card-header"><i class="fa fa-home fa-fw"></i>报名记录</div>
    <div class="layui-card-body" id="">
        <!--查询条件-->
        <div class="lg-search lg-layout-row lg-layout-row-auto" skin="lg-form-inline">
            <div class="lg-search-item" style="width:100px">
                <lg-form-date :data="{Title:'学年',Name:'Year'}" v-model:value="where.Year.Value" format="year" v-on:done="getPlansForOption"></lg-form-date>
            </div>
            <div class="lg-search-item" style="width:120px">
                <lg-form-select :data="{Title:'学期',Options:options.Semester}" v-model:value="where.Semester.Value" val-type="value" v-on:done="getPlansForOption"></lg-form-select>
            </div>
            <div class="lg-search-item" style="width:150px">
                <lg-form-select :data="{Title:'班级',Options:options.Grades}" v-model:value="where.GradeId.Value" val-type="value" v-on:done="getPlansForOption"></lg-form-select>
            </div>
            <div class="lg-search-item" >
                <lg-form-select :data="{Title:'计划',Options:options.Plans}" v-model:value="where.PlanId.Value" val-type="value"></lg-form-select>
            </div>
            <div class="lg-search-item" style="width:150px">
                <lg-form-singletext :data="{Title:'姓名'}" v-model:value="where.Name.Value" val-type="value"></lg-form-singletext>
            </div>
            <div class="lg-search-item" style="width:200px">
                <lg-form-idnumber :data="{Title:'证件号'}" v-model:value="where.IdNumber.Value" val-type="value"></lg-form-idnumber>
            </div>
            <div class="lg-search-item" style="width:180px">
                <lg-form-phone :data="{Title:'手机'}" v-model:value="where.Phone.Value" val-type="value"></lg-form-phone>
            </div>
            <div class="lg-search-item" style="width:180px">
                <lg-form-singletext :data="{Title:'流水号'}" v-model:value="where.SN.Value"></lg-form-singletext>
            </div>
            <div class="lg-search-item" style="width:300px">
                <lg-form-daterange :data="{Title:'日期',Name:'AddTime'}" v-model:value="where.DateRange.Value" val-type="value"></lg-form-daterange>
            </div>
            <div class="lg-search-item" style="width:180px">
                <lg-form-singletext :data="{Title:'家长姓名'}" v-model:value="where.FamilyName.Value" val-type="value"></lg-form-singletext>
            </div>
            <div class="lg-search-item" style="width:200px">
                <lg-form-phone :data="{Title:'家长手机'}" v-model:value="where.FamilyPhone.Value" val-type="value"></lg-form-phone>
            </div>
            <div class="lg-search-item" style="width:150px">
                <lg-form-select :data="{Title:'学费',Options:options.Tuition}" v-model:value="where.Tuition.Value" val-type="value"></lg-form-select>
            </div>
            <div class="lg-search-item" style="width:150px">
                <lg-form-select :data="{Title:'录取',Options:options.PassState}" v-model:value="where.PassState.Value" val-type="value"></lg-form-select>
            </div>
            <div class="lg-search-item" style="width:150px">
                <lg-form-select :data="{Title:'考试',Options:options.ExamCount}" v-model:value="where.ExamCount.Value" val-type="value"></lg-form-select>
            </div>
            <div class="lg-search-item layui-input-inline" style="width:auto">
                <button class="layui-btn" type="button" v-on:click="onSearch">搜索</button>
            </div>
        </div>
        <!--数据主体-->
        <div class="lg-form-box">
            <!--头部工具条-->
            <div class="lg-table-tool" id="toolbar">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm layui-btn-danger" v-on:click="OpenColMapControlPanel"><i class="fa fa-cog fa-fw"></i>字段配置</button>
                    <button class="layui-btn layui-btn-sm layui-btn-warm" v-on:click="OnImportAcceptClick"><i class="fa fa-file-excel-o fa-fw"></i>导入录取</button>
                    <button class="layui-btn layui-btn-sm layui-btn-normal" v-on:click="exportExcel"><i class="fa fa-file-excel-o fa-fw"></i>导出</button>
                    <button class="layui-btn layui-btn-sm layui-btn-primary refresh" v-on:click="refresh"><i class="fa fa-refresh fa-fw"></i>刷新</button>
                </div>
            </div>
            <!--table-->
            <div class="lg-table-body">
                <table class="lg-table">
                    <thead>
                        <tr>
                            <th class="lg-table-check" v-on:click='onRowCheckAll'>
                                <div :class="['layui-unselect layui-form-checkbox',{'layui-form-checked':applys.length>0&&checked.length==applys.length}]" lay-skin="primary"><i class="layui-icon layui-icon-ok"></i></div>
                            </th>
                            <th v-for="item in showCol" :style="{'width':item.Width?item.Width+'px':'auto'}">{{item.Title}}</th>
                            <th style="text-align:center;width:60px">缴费单</th>
                            <th style="width:160px">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="row in applys">
                            <td class="lg-table-check">
                                <div :class="['layui-unselect layui-form-checkbox',{'layui-form-checked':isChecked(row)}]" lay-skin="primary" v-on:click="onRowCheck(row)"><i class="layui-icon layui-icon-ok"></i></div>
                            </td>
                            <td v-for="column in showCol" v-on:click="OnCellClick(column.Name,row)">{{FormatValue(column.Name,row[column.Name])}}</td>
                            <td style="text-align:center">
                                <span v-if="row.PaymentSlip>0" class='fa fa-check' style="color:rgb(59 153 85)" title='已生成'></span>
                            </td>
                            <td>
                                <button class="layui-btn layui-btn-xs layui-btn-danger" title="取消录取" v-on:click="CancelAccept(row)"><span class="fa fa-close fa-fw"></span></button>
                                <button class="layui-btn layui-btn-xs layui-btn-normal" title="设置学费缴纳状态" v-on:click="SetTuitionState(row)"><span class="fa fa-jpy fa-fw"></span></button>
                                <button class="layui-btn layui-btn-xs layui-btn-warm" title='生成缴费单' v-if="row.PaymentSlip==0" v-on:click="OnMakePaymentSlip(row)"><span class='fa fa-file-text-o fa-fw'></span></button>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="LgTable-NoData" v-if="applys.length==0||loading">
                    <p v-if="!loading">没有数据 ~</p>
                    <p v-if="loading"><img src="/Plugins/layer/theme/default/loading-2.gif" style="width:20px" /> 数据加载中...</p>
                </div>
            </div>
            <!--分页-->
            <div id="pager" style="margin-top:-10px;"></div>
        </div>
    </div>
    <!--弹层-->
    <div class="fieldWrap" id="colMapWrap" v-show="colmapState" style="position:relative;width:700px;">
        <div class="field-head">
            <div class="lg-form-item">
                <div class="lg-form-td name">字段名</div>
                <div class="lg-form-td">查看</div>
                <div class="lg-form-td">导出</div>
                <div class="lg-form-td">字段宽度</div>
                <div class="lg-form-td">排序（拖动）</div>
            </div>
        </div>
        <div class="field-body">
            <draggable :list="colmaps" handle=".drag" ghost-class="ghost" :force-fallback="true" chosen-class="choseClass" animation="300" delay="2" item-key="1">
                <template #item="{ element }">
                    <div class="lg-form-item">
                        <div class="lg-form-td"><input type="text" class="name" v-model="element.Title" /></div>
                        <div class="lg-form-td">
                            <div :class="['layui-unselect layui-form-checkbox',{'layui-form-checked':element.IsShow}]"
                                 v-on:click="element.IsShow=!element.IsShow" lay-skin="primary">
                                <i class="layui-icon layui-icon-ok"></i>
                            </div>
                        </div>
                        <div class="lg-form-td">
                            <div :class="['layui-unselect layui-form-checkbox',{'layui-form-checked':element.IsExport}]"
                                 v-on:click="element.IsExport=!element.IsExport" lay-skin="primary">
                                <i class="layui-icon layui-icon-ok"></i>
                            </div>
                        </div>
                        <div class="lg-form-td"><input type="number" class="width" placeholder="宽度" v-model="element.Width" /></div>
                        <div class="lg-form-td drag" title="调整顺序"><i class="fa fa-bars fa-fw"></i></div>
                    </div>

                </template>
            </draggable>
        </div>
        <div class="field-help">
            <p>*宽度不填写则默认宽度,可点击图标<i class="fa fa-bars fa-fw"></i>拖动位置顺序。</p>
        </div>
        <div :class="['layui-unselect layui-form-checkbox',{'layui-form-checked':exportAll}]"
             v-on:click="onCheckAll('IsExport')" lay-skin="primary">
            <i class="layui-icon layui-icon-ok"></i><span>全部设为导出</span>
        </div>
        <div class="field-foot">
            <a href="javascript:;" class="layui-btn layui-btn-normal" v-on:click="saveColMaps(0)">保存设置</a>
            <a href="javascript:;" class="layui-btn layui-btn-normal layui-btn-danger" v-on:click="saveColMaps(1)">保存并关闭</a>
        </div>
    </div>
    <div class="fieldWrap" id="ImportAcceptWrap" v-show="importAcceptState" style="position:relative">
        <p>提示：</p>
        <div class="field-help">
            <p>
                1、通过导出功能批量导出学生，在表格中填写录取状态值:1-录取 2-未录取 3-待定<br />
                2、导入前请确保表格第一列名为'流水号',第二列名为'录取状态'<br />
                3、重复导入则替换之前的结果<br />
            </p>
        </div>
        <div class="field-foot">
            <input type="file" id="ImportAcceptFile" class="hide" accept="xls,xlsx" v-on:change="ImportAccept" ref='ImportAcceptFileSelector'>
            <div class="fileUpBox" v-on:click="this.$refs.ImportAcceptFileSelector.click()"><span class="fa fa-cloud-upload btn-file">上传</span></div>
        </div>
    </div>
    <!--学费状态切换-->
    <div id="TuitionPanel" class="lg-form-flex" style="display:none">
        <template v-for="item in options.Tuition">
            <div :class="['lg-form-option-check',{'selected':item.Value==tuition}]" v-on:click="tuition=item.Value" v-if="item.Value>0">
                {{item.Text}}<span class="fa fa-check"></span>
            </div>
        </template>
    </div>
    <!--缴费单生成-->
    <div id="MakePaymentSlipWrap" style="display:none;padding:20px;">
        <div class="f-r">
                <button class="layui-btn layui-btn-sm layui-btn-normal" v-on:click="OnLoadTemplate"><i class="fa fa-plus fa-fw"></i>加载模板</button>
            </div>
        <div class="layui-form">
            <fieldset class="layui-elem-field layui-field-title">
                <legend>学生信息</legend>
            </fieldset>
            <div class="lg-inline">
                <div class="lg-search-item" style="width:150px">
                    <lg-form-singletext :data="{Title:'姓名'}" :render-type='1' :value="paymentSlip.Name" ></lg-form-singletext>
                </div>
                 <div class="lg-search-item" style="width:80px">
                    <lg-form-singletext :data="{Title:'性别'}" :render-type='1' :value="paymentSlip.Gender" ></lg-form-singletext>
                </div>
                <div class="lg-search-item" style="width:180px">
                    <lg-form-phone :data="{Title:'手机'}" :render-type='1' v-model:value="paymentSlip.Phone"></lg-form-phone>
                </div>
                <div class="lg-search-item" style="width:100px">
                    <lg-form-singletext :data="{Title:'学年',Name:'Year'}" :render-type='1' :value="paymentSlip.Year"></lg-form-singletext>
                </div>
                <div class="lg-search-item" style="width:70px">
                    <lg-form-singletext :data="{Title:'学期'}" :render-type='1' :value="paymentSlip.Semester"></lg-form-singletext>
                </div>
                <div class="lg-search-item" style="width:210px">
                    <lg-form-select :data="{Title:'班级',Options:options.Grades}" :render-type='1'  v-model:value="paymentSlip.GradeId" val-type="value"></lg-form-select>
                </div>
            </div>
            <fieldset class="layui-elem-field layui-field-title">
                <legend>缴费项目</legend>
            </fieldset>

            <div class="layui-form-item">
                <table class="lg-table">
                    <thead>
                        <tr>
                            <th>项目</th>
                            <th>备注</th>
                            <th style="width:120px">金额</th>
                            <th style="width:50px">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in paymentSlip.Items">
                            <td>
                                <input type="text" v-model="item.Title" />
                            </td>
                            <td>
                                <input type="text" v-model="item.Tips" />
                            </td>
                            <td>
                                <input type="number" v-model="item.Amount" />
                            </td>
                            <td style="text-align:center"><i v-on:click="RemoveItem(index)" class="fa fa-trash-o hover-warm"></i></td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="2" style="text-align:right;">合计金额</td>
                            <td colspan="2">{{totalAmount}}</td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            <div class="layui-form-item text-center">
                <button class="layui-btn" type="button" v-on:click="OnSubmitPaymentSlip">确认添加</button>
            </div>
        </div>
    </div>
    <!--缴费模版选择-->
    <div id="TuitionTemplateSelectWrap" style="display:none;padding:15px">
        <ul>
            <li v-on:click="SetTuitionTemplateSelectState(item)" v-for="item in tuitionTemplates" :class="{'selected':item.selected}">{{item.Title}}{{item.Tips?"-"+item.Tips:""}}<i class="fa fa-check"></i></li>
        </ul>
    </div>
</div>
<style>
    #TuitionTemplateSelectWrap li {
        padding: 5px;
        margin: 5px;
        border: 1px solid #f0f0f0;
        position:relative;
        cursor:pointer;
    }
    #TuitionTemplateSelectWrap li i{
        color:#fff;
        font-size:10px;
        position:absolute;
        top:1px;
        right:1px;
        z-index:1;
        display:none
    }
    #TuitionTemplateSelectWrap li:hover{
        border:1px solid #1E9FFF;
        color:#1E9FFF;
    }
    #TuitionTemplateSelectWrap li.selected{
        border:1px solid #1E9FFF;
    }
    #TuitionTemplateSelectWrap li.selected:after {
        content: "";
        width: 0;
        height: 0;
        border-top: 25px solid #1E9FFF;
        border-left: 25px solid transparent;
        position:absolute;
        top:0px;
        right:0px;
    }
    #TuitionTemplateSelectWrap li.selected i{
        display:block;
    }
</style>
<script class="tempScript" type="module">
    import { freeForm } from '/plugins/lgform/lg.form.2.1.js'
    freeForm.addEventListener();
    frame.createPage({
        mounted: function() {
            var page = this;
            var app = Vue.createApp({
                data() {
                    return {
                        colmaps: [],//接口传过来的所有字段列表
                        applys: [],
                        pager: {
                            Page: 1,
                            Limit: 10
                        },
                        where: {
                            Year: { Name: "Year", Value: "" },
                            Semester: { Name: "Semester", Value: "" },
                            GradeId: { Name: "GradeId", Value: "" },
                            PlanId: { Name: "PlanId", Value: "" },
                            IdNumber: { Name: "IdNumber", Value: "" },
                            Phone: { Name: "Phone", Value: "" },
                            Name: { Name: "Name", Value: "", Key: "模糊匹配" },
                            DateRange: { Name: "DateRange", Value: "" },
                            FamilyName: { Name: "lg965720,lg132315", Value: "", Key: "模糊匹配" },
                            FamilyPhone: { Name: "lg039724,lg534904", Value: "", Key: "模糊匹配" },
                            IsDelete: { Name: "IsDelete", Value: "0" },
                            SN: { Name: "SN", Value: "" },
                            Tuition: { Name: "Tuition", Value: "" },
                            PassState: { Name: "PassState",Value:"" },
                            ExamCount: { Name: "ExamCount",Value:"" }
                        },
                        checked: [],
                        options: {
                            Semester: [
                                {
                                    Text: "不限",
                                    Value: ""
                                },
                                {
                                    Text: "1",
                                    Value: 1
                                },
                                {
                                    Text: "2",
                                    Value: 2
                                }],
                            Grades: [],
                            Plans: [],
                            IsThisSchool: [
                                {
                                    Text: "不限",
                                    Value: ""
                                },
                                {
                                    Text: "是",
                                    Value: "是"
                                },
                                {
                                    Text: "否",
                                    Value: "否"
                                }],
                            Tuition: [
                                {
                                    Text: "不限",
                                    Value: ""
                                },
                                {
                                    Text: "待缴费",
                                    Value: "1"
                                },
                                {
                                    Text: "预付定金",
                                    Value: "2"
                                },
                                {
                                    Text: "已缴费",
                                    Value: "3"
                                },
                                {
                                    Text: "申请退费",
                                    Value: "4"
                                },
                                {
                                    Text: "已退费",
                                    Value: "5"
                                },
                                {
                                    Text: "放弃缴费",
                                    Value: "6"
                                }
                            ],
                            PassState:[
                                {
                                    Text: "不限",
                                    Value: ""
                                },
                                {
                                    Text: "录取",
                                    Value: "1"
                                },
                                {
                                    Text: "未录取",
                                    Value: "2"
                                },
                                {
                                    Text: "待定",
                                    Value: "3"
                                },
                            ],
                            ExamCount:[
                                {
                                    Text: "不限",
                                    Value: ""
                                },
                                {
                                    Text: "已测试",
                                    Value: "1"
                                },
                                {
                                    Text: "未测试",
                                    Value: "0"
                                },
                            ]
                        },
                        loading: false,
                        colmapState: false,
                        importAcceptState: false,
                        tuition: "0",//变更缴费状态时，选中的状态值,
                        paymentSlip: {},
                        tuitionTemplates:[]
                    }
                },
                mounted: function() {
                    this.PaymentSlipInit();
                    this.GetColMaps();
                    this.GetApplys();
                    this.getGradesAndSetOption();
                    this.getPlansForOption();
                    this.GetTuitionTemplates();
                },
                computed: {
                    showCol: function() {
                        return this.colmaps.filter(p => p.IsShow);
                    },
                    exportCol: function() {
                        return this.colmaps.filter(p => p.IsExport);
                    },
                    exportFiledCount: function() {
                        var checkCount = this.colmaps.filter(p => p.IsExport).length;
                        var count = this.colmaps.length;
                        return "(" + checkCount + "/" + count + ")";
                    },
                    exportAll: function() {
                        var checkCount = this.colmaps.filter(p => p.IsExport).length;
                        var count = this.colmaps.length;
                        return checkCount == count;
                    },
                    totalAmount: function() {
                        var total = 0;
                        for (let i in this.paymentSlip.Items) {
                            total += this.paymentSlip.Items[i].Amount;
                        }
                        return total
                    }
                },
                methods: {
                    PaymentSlipInit: function() {
                        this.paymentSlip = {
                            Name: "",
                            Gender: "",
                            Year: "",
                            Semester: "",
                            GradeId: "",
                            Phone: "",
                            ApplySN: "",
                            TotalAmount:0,
                            Items: []
                        }                       
                    },
                    GetApplys: function() {
                        this.loading = true;
                        this.applys = [];
                        var where = this.formatWhere(true);
                        lg.request({
                            url: "/api/sys/apply/GetAcceptList",
                            method: "post",
                            data: { where: JSON.stringify(where) },
                            success: res => {
                                if (res.code == 0) {
                                    this.applys = this.FormatData(res.data) || [];
                                    this.setPage(res.count)
                                } else {
                                    layer.msg(res.msg, { icon: 2 });
                                }
                            },
                            complete: res => {
                                this.loading = false;
                            }
                        })
                    },
                    GetTuitionTemplates: function() {
                        lg.request({
                            url: "/api/sys/apply/GetTuitionTemplateList",
                            data: {IsUsing:1},
                            success: res => {
                                if (res.code == 0) {
                                    if (res.count > 0) {
                                        this.tuitionTemplates = res.data;
                                    }
                                }
                            }
                        })
                    },
                    onSearch: function() {
                        this.pager.Page = "1";
                        this.GetApplys();
                    },
                    formatWhere: function(isPager) {
                        var where = [];
                        for (let key in this.where) {
                            if (this.where[key].Value != "") {
                                where.push(this.where[key])
                            }
                        }
                        if (isPager == true) {
                            where.push({ "Name": "Page", Value: this.pager.Page });
                            where.push({ "Name": "Limit", Value: this.pager.Limit })
                        }
                        return where;
                    },
                    refresh: function() {
                        this.GetApplys();
                    },
                    setPage: function(count) {
                        var that = this;
                        layui.laypage.render({
                            elem: 'pager'
                            , curr: that.pager.Page
                            , limit: that.pager.Limit
                            , count: count
                            , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
                            , jump: function(obj, first) {
                                if (!first) {
                                    that.pager.Page = obj.curr;
                                    that.pager.Limit = obj.limit;
                                    that.GetApplys();
                                }
                            }
                        });
                    },
                    exportExcel: function() {
                        var arry = this.colmaps.filter(p => p.IsExport);
                        var where = this.formatWhere();
                        if (arry.length > 0) {
                            this.exportbtn = false;
                            var obj = {};
                            for (let i in arry) {
                                obj[arry[i].Name] = arry[i].Title
                            }
                            lg.getFile({
                                url: "/api/sys/apply/exportAccept",
                                fileName: "报名数据-" + lg.GetDate("yyyyMMddHHmmss"),
                                data: { where: JSON.stringify(where), cols: JSON.stringify(obj) }
                            })
                        } else {
                            layer.msg("请选择列后再执行导出！", { icon: 2 })
                        }
                    },
                    info: function(item) {
                        frame.NavigateTo({
                            url: "/lgm/apply/apply/info/" + item.Id,
                            title: "学生详情[" + item.Name + "]"
                        });
                    },
                    isChecked: function(item) {
                        return this.checked.filter(p => p.Id == item.Id).length == 1;
                    },
                    onRowCheck: function(item) {
                        if (this.isChecked(item)) {
                            this.checked = this.checked.filter(p => p.Id != item.Id);
                        } else {
                            this.checked.push(item);
                        }
                    },
                    onRowCheckAll: function() {
                        var b = this.checked.length == this.applys.length;
                        if (b) {
                            this.checked = []
                        } else {
                            var arry = [];
                            for (let i in this.applys) {
                                arry.push(this.applys[i]);
                            }
                            this.checked = arry;
                        }

                    },
                    onCheckAll: function(attr) {
                        var b = false;
                        var checkCount = this.colmaps.filter(p => p[attr]).length;
                        var count = this.colmaps.length;
                        if (checkCount == count) {
                            b = true;
                        }
                        for (let i in this.colmaps) {
                            this.colmaps[i][attr] = !b;
                        }
                    },
                    GetColMaps: function() {
                        lg.request({
                            url: "/api/sys/apply/GetAcceptColMaps",
                            success: res => {
                                if (res.code == 0) {
                                    this.colmaps = res.data;
                                } else {
                                    top.layer.msg(res.msg, { icon: 2 });
                                }
                            }
                        })
                    },
                    saveColMaps: function(isClosePanel) {
                        lg.request({
                            url: "/api/sys/apply/SaveAcceptColMaps",
                            method: "post",
                            data: { maps: JSON.stringify(this.colmaps) },
                            success: res => {
                                if (res.code == 0) {
                                    if (isClosePanel == 1) {
                                        layer.closeAll();
                                    }
                                    layer.msg("保存成功！", { icon: 1 });
                                }
                            }
                        })
                    },
                    getPlansForOption: function() {
                        lg.request({
                            url: "/api/sys/apply/getPlanList",
                            data: {
                                Page: 1,
                                Limit: 9999,
                                Year: this.where.Year.Value,
                                Semester: this.where.Semester.Value,
                                GradeId: this.where.GradeId.Value
                            },
                            success: res => {
                                if (res.code == 0) {
                                    if (res.data != null) {
                                        var arry = [{ Text: '不限', Value: '' }];
                                        for (let i in res.data) {
                                            arry.push({ Text: res.data[i].Title, Value: res.data[i].Id });
                                        }
                                        this.options.Plans = arry;
                                    } else {
                                        this.options.Plans = [];
                                    }
                                }
                            }
                        })
                    },
                    getGradesAndSetOption: function() {
                        lg.request({
                            url: "/api/sys/apply/GetGradeList",
                            data: { page: 1, limit: 999 },
                            success: res => {
                                if (res.code == 0) {
                                    if (res.data != null && res.data.length > 0) {
                                        var grades = this.Sort(res.data, 0, []);
                                        var options = [{ Text: '不限', Value: '' }];
                                        for (let i in grades) {
                                            options.push({
                                                Text: grades[i].FullName,
                                                Value: grades[i].Id
                                            })
                                        }
                                        this.options.Grades = options;
                                    } else {
                                        this.options.Grades = [];
                                    }
                                } else {
                                    top.layer.msg(res.msg, { icon: 2 });
                                }
                            }
                        })
                    },
                    Sort: function(data, fid, arr) {
                        var that = this
                        var grades = data.filter(d => d.FatherId == fid)
                        if (grades.length > 0) {
                            for (let i in grades) {
                                var obj = grades[i];
                                arr.push(obj);
                                that.Sort(data, obj.Id, arr)
                            }
                        }
                        return arr;
                    },
                    FormatData: function(data) {
                        if (data) {
                            for (let i in data) {
                                var row = data[i];
                                var formData = lg.convert.toJson(row.FormData, null);
                                if (formData) {
                                    for (let key in formData) {
                                        var val = formData[key];
                                        if (val == 'lg-no-render') {
                                            val = "";
                                        }
                                        else {
                                            if (typeof val == "object") {
                                                val = val.Value || val.value;
                                            } else {
                                                var obj = lg.convert.toJson(val, null);
                                                if (obj) {
                                                    val = val = obj.Value || obj.value;
                                                }
                                            }

                                        }
                                        row[key] = val;
                                    }
                                }
                            }
                        }
                        return data;
                    },
                    FormatValue: function(key, val) {
                        if (key == "PayState") {
                            switch (val) {
                                case 1:
                                    return "待支付";
                                case 2:
                                    return "已支付";
                                default:
                                    return "";
                            }
                        }
                        else if (key == "PassState") {
                            switch (val) {
                                case 1:
                                    return "已录取";
                                case 2:
                                    return "未录取";
                                case 3:
                                    return "待定";
                                default:
                                    return "";
                            }
                        }
                        else if (key == "Tuition") {
                            switch (val) {
                                case 1:
                                    return "待缴费";
                                case 2:
                                    return "预缴费";
                                case 3:
                                    return "已缴费";
                                case 4:
                                    return "申请退费";
                                case 5:
                                    return "已退费";
                                case 6:
                                    return "放弃缴费";
                                default:
                                    return "";
                            }
                        }
                        else {
                            return val;
                        }
                    },
                    OpenColMapControlPanel: function() {
                        this.colmapState = true;
                        layer.open({
                            type: 1,
                            title: "字段配置",
                            content: $("#colMapWrap")
                        })
                    },
                    OnImportAcceptClick: function() {
                        this.importAcceptState = true;
                        layer.open({
                            type: 1,
                            title: "批量录取",
                            content: $("#ImportAcceptWrap")
                        })
                    },
                    ImportAccept: function() {
                        var event = this.$refs.ImportAcceptFileSelector;
                        var files = event.files;
                        //较验文件数，未选择文件则不执行任何事件
                        if (files.length == 0) {
                            return false;
                        }
                        var fd = new FormData();
                        fd.append("file", files[0]);
                        lg.postFile({
                            url: "/api/sys/apply/importAccept",
                            data: fd,
                            success: res => {
                                if (res.code == 0) {
                                    layer.closeAll();
                                    layer.msg(res.msg, { icon: 1 });
                                    this.refresh();
                                } else {
                                    layer.msg(res.msg, { icon: 2 })
                                }
                            }
                        })

                        event.value = "";
                    },
                    OnCellClick: function(name, obj) {

                    },
                    CancelAccept: function(obj) {
                        var that = this;
                        if (obj.Tuition > 1) {
                            layer.msg("已有缴费状态，不支持取消录取，请先变更缴费状态为'待缴费'再执行取消录取操作！", { icon: 2, anim: 6 })
                        } else {
                            layer.confirm("确定要取消录取学生:[" + obj.Name + "]吗?", function(box) {
                                layer.close(box);
                                lg.request({
                                    url: "/api/sys/apply/cancelaccept",
                                    data: { id: obj.Id },
                                    method: "post",
                                    success: res => {
                                        if (res.code == 0) {
                                            that.refresh();
                                        } else {
                                            layer.msg(res.msg, { icon: 2 })
                                        }
                                    }
                                })
                            })
                        }

                    },
                    SetTuitionState: function(obj) {
                        this.tuition = obj.Tuition;
                        var that = this;
                        layer.open({
                            type: 1,
                            title: "设置学费缴纳状态",
                            content: $("#TuitionPanel"),
                            btn: ['确认变更'],
                            yes: function() {
                                layer.closeAll();
                                lg.request({
                                    url: "/api/sys/apply/ChangeTuition",
                                    method: "post",
                                    data: { id: obj.Id, Tuition: that.tuition },
                                    success: res => {
                                        if (res.code == 0) {
                                            that.refresh();
                                        } else {
                                            layer.msg(res.msg, { icon: 2 })
                                        }
                                    }
                                })
                            }
                        })
                    },
                    SetTuitionTemplateSelectState: function(item) {
                        let  templates = this.tuitionTemplates;
                        for (let i in templates) {
                            templates[i].selected = false;
                        }
                        if (item) {
                            item.selected = true;
                        }
                        
                    },
                    OnMakePaymentSlip: function(obj) {
                        this.paymentSlip=lg.obj.copyData(this.paymentSlip,obj)
                        this.paymentSlip.ApplySN = obj.SN;
                        layer.open({
                            type: 1,
                            area: ['900px', '800px'],
                            content: $("#MakePaymentSlipWrap"),
                            cancel: this.PaymentSlipInit
                        })
                    },
                    OnLoadTemplate: function() {
                        this.SetTuitionTemplateSelectState();
                        layer.open({
                            type:1,
                            area:["600px","500px"],
                            content:$("#TuitionTemplateSelectWrap"),
                            btn: ['确认使用','放弃'],
                            yes:this.OnTemplateSelected,
                            btn2: function(box) {
                                layer.close(box)
                            }
                        })
                    },
                    OnSubmitPaymentSlip: function() {
                        var data = lg.obj.copy(this.paymentSlip);
                        data.Items = JSON.stringify(data.Items);
                        data.TotalAmount = this.totalAmount;
                        lg.request({
                            url:"/api/sys/apply/AddPaymentSlip",
                            method:"post",
                            data:data,
                            success: res => {
                                if (res.code == 0) {
                                    layer.closeAll();
                                    layer.msg("执行成功！", { icon: 1 });
                                    this.PaymentSlipInit();
                                    this.GetApplys();
                                } else {
                                    layer.msg(res.msg,{icon:2})
                                }
                            }
                        })
                    },
                    OnTemplateSelected: function(box) {
                        var arry= this.tuitionTemplates.filter(p => p.selected);
                        console.log(arry)
                        if (arry.length > 0) {
                            layer.close(box);
                            this.paymentSlip.Items=lg.convert.toJson(arry[0].Items,[])
                        }else{
                            layer.msg("请先选择模版！",{icon:2,anim:6})
                        }
                    },
                    RemoveItem: function(index) {
                        var that = this;
                        layer.confirm("是否确认移除该收费项？", function(box) {
                            layer.close(box);
                            that.paymentSlip.Items.splice(index,1)
                        })
                    },
                }
            })
            freeForm.regComponent(app);
            app.component('draggable', window.vuedraggable);
            this.vm = app.mount("#lg-AcceptList");
        },
        methods: {
            reload: function() {
                this.vm.refresh();
            },
        }
    }).mount();
</script>